<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import axios from 'axios';
let IntervalId:number;
import { h } from 'vue'
import { ElNotification } from 'element-plus'
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

let myChart: Chart;

const methods = {
	
	onSubmit: async () => {
		

		state.isAttacking = !state.isAttacking;
		if (state.isAttacking) {
			ElNotification({
				title: '提示',
				message: h('i', { style: 'color: teal' }, '程序已经开始运行，请耐心等待10s。'),
			})
			state.buttonText = '停止攻击';
			state.buttonStyle.backgroundColor = 'red';
			const { data } = await axios.post('/iPv6api2/start?victim=' + state.form.victim + '&mod=' + state.form.mod);
		} else {
            state.buttonText = '继续攻击';
            state.buttonStyle.backgroundColor = 'blue';
			const { data } = await axios.post('/iPv6api2/stop');
			clearInterval(IntervalId);
		}
		clearInterval(state.intervalId);
		const fetchUpdate = async () => {
			const response = await axios.get('/iPv6api2/amp');
			if(response.data.desc == 'float division by zero' || response.data.desc == 'list index out of range' || response.data.desc == null) {
				//ssss

			}
			if(!(response.data.desc == 'float division by zero' || response.data.desc == 'list index out of range')){
				state.amp = Math.floor(response.data.desc as number);
				state.total = Math.floor(state.total as number);
				state.count = state.count as number
				updateChart(new Date().toLocaleTimeString(), state.amp);

				if (state.amp != 0) {
					state.total += state.amp;
					state.count += 1;
					if (state.count > 0) {
						state.res = Math.floor(state.total / state.count);
					}
					console.log(state.amp);
					console.log(state.count);
					console.log(Math.floor(state.total / state.count));

				}
			}
		};

		IntervalId = setInterval(fetchUpdate, 1500);

		setTimeout(() => {
            clearInterval(IntervalId);
        }, 600000);
	}
};

interface UserForm {
	victim: string;
	mod: string;
}

onMounted(async () => {
	state.intervalId = setInterval(() => {
    const ran = 0;
    state.amp = Number(ran.toFixed(2)); 
	updateChart(new Date().toLocaleTimeString(), state.amp);
  }, 1000);

  const ctx = document.getElementById('myChart') as HTMLCanvasElement;
  myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [0.8],
      datasets: [{
        label: '放大倍率',
        data: [],
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        x: {
          title: {
            display: true,
            text: '时间'
          }
        },
        y: {
          title: {
            display: true,
            text: '放大倍率'
          }
        }
      }
    }
  });
});

const updateChart = (time: string, amp: number) => {
  myChart.data.labels.push(time);
  myChart.data.datasets[0].data.push(amp);
  myChart.update();
};

const state = reactive({
	form: {
		victim: 'fd00::141',
		mod: 'ipv6',
	} as UserForm,
    buttonText: '开始攻击',
	buttonStyle: { backgroundColor: ''},
	isAttacking: false,
	amp:0,
	total: 0,
	res: 0,
	count: 0,
	intervalId: 0
});
</script>

<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }" class="bread">主页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/IPv6' }" class="bread">IPv6</el-breadcrumb-item>
			<el-breadcrumb-item class="bread">IPv6拒绝服务攻击</el-breadcrumb-item>
		</el-breadcrumb>
	</div>

	<div style="display: flex;">

		<div style="width: 80%;">
			<div class="display-flex j-c-c a-i-c height100">
				<div class="login-form">
					<h1 class="title">IP输入</h1>
					<el-form :model="state.form">
						<el-form-item prop="email" label="攻击的靶机的IPv6地址">
							<el-input v-model="state.form.victim" placeholder="请输入IPv6地址" disabled></el-input>
						</el-form-item>


						<el-form-item class="button-container">
							<el-button class="Mybutton" type="primary" @click="methods.onSubmit"
								:style="{ backgroundColor: state.buttonStyle.backgroundColor }">
								{{ state.buttonText }}
							</el-button>
						</el-form-item>
					</el-form>
				</div>

				<div class="Output-form">
					<h1 class="title">攻击效果</h1>

					<el-form :model="state.form">
						<el-form-item prop="email" label="流量放大倍率">
							<el-input v-model="state.amp" placeholder="放大倍率"></el-input>
						</el-form-item>
						<el-form-item prop="email" label="流量平均放大倍率">
							<el-input v-model="state.res" placeholder="放大倍率"></el-input>
						</el-form-item>
					</el-form>
					攻击开始且稳定后将大约每3秒探测一次放大倍率
					<canvas id="myChart"></canvas>
				</div>
			</div>
		</div>
		<div style="width: 50%;">
			<img src="@/assets/IPV6DOS.jpg" alt="tsinghua" style="width: 100%; height: auto;">
		</div>
	</div>
</template>


<style lang="css" scoped>
.login-form {
	width: 400px;
	height: 220px;
	margin: 0 auto;
	margin-top: 10px;
	padding: 30px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.Output-form {
	width: 400px;
	height: 360px;
	margin: 0 auto;
	padding: 30px;
  margin-top: 10px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.code-box {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}

.bread {
    font-size: 34px;
    color: rgb(67, 166, 166);
}

.Output {
	position: relative;
	margin-top: 10px;
}

.Mybutton {
	text-align: center;
	margin: 0 auto;
	
}

.button-container {
  margin-top: 20px; /* 增加按钮与上方的距离 */
  text-align: center; /* 使按钮居中对齐 */
}
</style>